<template>
  <el-dialog
    :title="title"
    :visible.sync="open"
    width="80%"
    :close-on-click-modal="false"
    class="dia-style"
    @close="resetForm">
    <div style="padding: 0 20px 20px 0">
      <div class="dia-form">
        <HkDetails label-width="120" :details-list="detailsList" :form-data="formData">
          <!--     关联指标列表      -->
          <template #metricsStr>
            <el-button
              icon="el-icon-plus"
              size="small"
              style="width: 108px; margin-bottom: 20px"
              @click="handleAddTable"
              >添加
            </el-button>
            <HkTable
              :loading="loading"
              :table-data="metricsStrTableData"
              :table-columns="metricsStrList"
              :show-pag="false"
              :operate="true"
              :is-need-index="true">
              <template #metricsName="scope">
                <div v-if="scope.row.row.flag == '0'">
                  {{ scope.row.row.metricsName }}
                </div>
                <el-form-item v-else label-width="0px">
                  <el-select
                    v-model="scope.row.row.metricsName"
                    placeholder="请选择"
                    clearable
                    :style="{ width: '100%' }"
                    @change="handleChange($event, scope.row.$index)">
                    <el-option
                      v-for="(item, index) in allMetricsList"
                      :key="index"
                      :label="item.label"
                      :value="item.value" />
                  </el-select>
                </el-form-item>
              </template>
              <template #levelName="scope">
                <div v-if="scope.row.row.flag == '0'">
                  {{ scope.row.row.levelName }}
                </div>
                <el-form-item v-else label-width="0px">
                  <el-input v-model="scope.row.row.levelName" disabled />
                </el-form-item>
              </template>
              <template #typeName="scope">
                <div v-if="scope.row.row.flag == '0'">
                  {{ scope.row.row.typeName }}
                </div>
                <el-form-item v-else label-width="0px">
                  <el-input v-model="scope.row.row.typeName" disabled />
                </el-form-item>
              </template>
              <template #operate="scope">
                <el-button type="text" @click="handleDelete(scope.row.row, scope.row.index)">删除 </el-button>
              </template>
            </HkTable>
          </template>
          <!--      执行情况    -->
          <template #Implementation>
            <div>共计命中{{ count }}次指标</div>
            <div>
              <span>最早时间：{{ earliestLogTime ? earliestLogTime : '-' }}</span
              ><span>最晚时间：{{ latestLogTime ? latestLogTime : '-' }}</span>
            </div>
            <HkTable
              :loading="loading"
              :table-data="implementTableData"
              :table-columns="implementList"
              :show-pag="false" />
          </template>
        </HkDetails>
      </div>
    </div>
    <!-- 底部 -->
    <div slot="footer">
      <el-button type="primary" @click="handleSubmit">保 存</el-button>
      <el-button @click="resetForm">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import HkTable from '@/components/Hk-Table/index'
import HkDetails from '@/components/Hk-Details/noStyleDetail'
import { metricsList, updateMetrics } from '@/api/icp/modelManagement'
import { deepClone } from '@/utils'

export default {
  components: { HkTable, HkDetails },
  props: {
    title: {
      type: String,
      default() {
        return ''
      },
    },
  },
  data() {
    return {
      loading: false,
      open: false,
      count: 0,
      earliestLogTime: '',
      latestLogTime: '',
      detailsList: [
        { label: '模型名称', field: 'modelName' },
        { label: '描述', field: 'description' },
        { label: '创建时间', field: 'createTime' },
        { label: '关联指标', field: 'metricsStr', type: 'slot' },
        { label: '执行情况', field: 'Implementation', type: 'slot' },
      ],
      formData: {},
      //  关联指标 列表
      metricsStrTableData: [],
      metricsStrList: [
        { label: '名称', param: 'metricsName', type: 'slot' },
        { label: '级别', param: 'levelName', type: 'slot' },
        { label: '类型', param: 'typeName', type: 'slot' },
      ],
      allList: [],
      allMetricsList: [],
      implementTableData: [],
      implementList: [
        { label: '指标名称', param: 'metricsName' },
        { label: '命中次数', param: 'count' },
        { label: '最早时间', param: 'earliestLogTime' },
        { label: '最晚时间', param: 'latestLogTime' },
      ],
      id: '',
    }
  },
  mounted() {},
  methods: {
    /** 显示弹窗 */
    show(id) {
      this.open = true
      this.getList(id)
    },
    /**  获取详情数据 */
    getList(id) {
      metricsList(id).then((res) => {
        this.id = res.id
        this.formData = {
          modelName: res.modelName,
          description: res.description,
          createTime: res.createTime,
        }
        this.metricsStrTableData = deepClone(res?.relationMetricsList) || []
        this.implementTableData = deepClone(res?.relationMetricsList) || []
        this.allList = res.allMetricsList
        this.allMetricsList = res.allMetricsList.map((i) => {
          return { label: i.metricsName, value: i.id }
        })
        this.count = res.count
        this.earliestLogTime = res.earliestLogTime
        this.latestLogTime = res.latestLogTime
      })
    },
    /**  点选下拉框 */
    handleChange(value, index) {
      const selectedList = this.allList.filter((i) => {
        return i.id === value
      })
      this.metricsStrTableData[index].levelName = selectedList[0].levelName
      this.metricsStrTableData[index].typeName = selectedList[0].typeName
    },
    /** 保存 */
    handleSubmit() {
      const lasetList =
        this.metricsStrTableData.length > 0 ? this.metricsStrTableData[this.metricsStrTableData.length - 1] : null
      if (lasetList && lasetList.flag !== '0') {
        if (lasetList.metricsName) {
          const oldData = this.metricsStrTableData.filter((i) => {
            return i.flag === '0'
          })
          const newData = this.metricsStrTableData.filter((i) => {
            return i.flag !== '0'
          })
          //  获取下拉列表所有选中的数据
          const newAllList = []
          newData.forEach((i) => {
            this.allList.forEach((j) => {
              if (i.metricsName === j.id) {
                newAllList.push(j)
              }
            })
          })
          const submitData = newAllList.concat(oldData).map((i) => {
            return { id: i.id, metricsCode: i.metricsCode }
          })
          this.saveData({ id: this.id, metricsList: submitData }).then((res) => {
            this.$message.success(res)
            this.open = false
            this.$emit('updateList')
          })
        } else {
          this.$message.warning('请填写完整关联指标')
        }
      } else {
        this.saveData({
          id: this.id,
          metricsList: this.metricsStrTableData,
        }).then((res) => {
          this.$message.success(res)
          this.open = false
          this.$emit('updateList')
        })
      }
    },
    saveData(param) {
      return new Promise((resolve, reject) => {
        updateMetrics(param)
          .then((res) => {
            resolve(res)
          })
          .catch((error) => {
            reject(error)
          })
      })
    },
    /**  取消 */
    resetForm() {
      this.open = false
    },
    /** 添加 */
    handleAddTable() {
      const newList = this.metricsStrTableData.filter((i) => {
        return i.flag !== '0'
      })
      if (newList.length > 0) {
        const isEmpty = newList.every((i) => {
          return i.metricsName !== '' && i.levelName !== '' && i.typeName !== ''
        })
        if (isEmpty) {
          this.metricsStrTableData.push({
            metricsName: '',
            levelName: '',
            typeName: '',
          })
        } else {
          this.$message.warning('请填写完整再添加！')
        }
      } else {
        this.metricsStrTableData.push({
          metricsName: '',
          levelName: '',
          typeName: '',
        })
      }
    },
    /** 删除 */
    handleDelete(row, index) {
      console.log(index)
      this.metricsStrTableData.splice(index, 1)
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep .el-table {
  margin: 0px !important;
}

::v-deep .el-input--mini .el-input__inner {
  height: 36px !important;
  line-height: 36px !important;
}

::v-deep .el-form-item--mini.el-form-item {
  margin-bottom: 0px !important;
}
// ::v-deep .el-dialog {
//   height: 90%;
// }
::v-deep .el-dialog__body {
  height: 84%;
  overflow: auto;
}
.slqDiv {
  margin: 10px 0;
  background: #f7f7f7;
  padding: 16px;
  border-radius: 4px;

  .floor1 {
    display: flex;
    line-height: 20px;
    align-items: center;

    &::before {
      content: '';
      display: inline-block;
      background: #1890ff;
      width: 4px;
      height: 20px;
      margin-right: 10px;
    }
  }

  .floor2 {
    width: 100%;
    border: 1px solid #e8e8e8;
    height: 165px;

    .head {
      width: 100%;
      height: 41px;
      line-height: 41px;
      background: #eff4f8;
      padding-left: 16px;
      text-align: left;
      font-size: 14px;
      color: #303032;
    }

    .colum {
      height: calc(100% - 41px);
      background: #fff;
      padding: 16px;

      .colum-list {
        line-height: 30px;
      }
    }
  }
}
</style>
